// 响应式布局混入
@mixin responsive($property, $value) {
  #{$property}: rem($value);
}

// 响应式宽度
@mixin width($value) {
  @include responsive('width', $value);
}

// 响应式高度
@mixin height($value) {
  @include responsive('height', $value);
}

// 响应式边距
@mixin margin($value...) {
  @if length($value) == 1 {
    margin: rem($value);
  } @else {
    margin: rem(nth($value, 1)) rem(nth($value, 2));
  }
}

@mixin padding($value...) {
  @if length($value) == 1 {
    padding: rem($value);
  } @else {
    padding: rem(nth($value, 1)) rem(nth($value, 2));
  }
}